<template>

	<view class="content">
		<view id="docx" style="position: relative;">
			<view class="sign-box">
				<view v-if="!signImg" class="sign" @click="sign()">签字区</view>
				<view v-else >
					<image class="signimg" :src="IMG_URL+signImg" mode="widthFix" />
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	import {
		IMG_URL,
	} from "@/config/app.js";
	import jsPreviewDocx from "@js-preview/docx";
	import '@js-preview/docx/lib/index.css'
	import {
		signTrain
	} from "../../api/my.js";
	export default {
		data() {
			return {
				IMG_URL: IMG_URL,
				docx: '',
				signImg: '',
				train_id: ''
			}
		},
		mounted() {
			
		},
		onLoad(option) {

			let that = this
			that.train_id = option.train_id
			uni.$on('isRefresh', function(data) {
				that.signImg = data
				console.log(that.signImg);
			})
			this.getinfo()
			// this.get()
		},
		methods: {
			async getinfo() {
				await signTrain({
					'train_id':this.train_id
				}).then(res => {
					console.log('获取Word详情', res);
					this.docx = res.data.word
					this.signImg = res.data.sign
					this.get()
				});
			},
			get() {
				const myDocxPreviewer = jsPreviewDocx.init(document.getElementById('docx'));
				//传递要预览的文件地址
				myDocxPreviewer.preview(
					// 'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx'
					IMG_URL+this.docx
					).then(
				res => {
					console.log('预览完成');
				}).catch(e => {
					console.log('预览失败', e);
				})
			},
			sign() {
				uni.navigateTo({
					url: '/pages/index/sign?train_id=' + this.train_id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// position: relative;
	}

	.sign {
		width: 120px;
		height: 50px;
		text-align: center;
		border-radius: 20rpx;
		border: 1px solid #DDDDDD;
		font-weight: bold;
		font-size: 20px;
		color: #CCCCCC;
		background-color: #DDDDDD;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.signimg {
		width: 120px;
		height: 50px;
		text-align: center;
		border-radius: 20rpx;
		border: 1px solid #DDDDDD;
		font-weight: bold;
		font-size: 20px;
		color: #CCCCCC;
		background-color: #DDDDDD;
	}


	.sign-box {
		position: absolute;
		bottom: 20px;
		right: 20px;
		z-index: 2;
	}
</style>